
<link type="text/css" rel="stylesheet" href="test.css">

<style  TYPE="text/css"> 
<!--
.control-label {
  width: 10em;
  display:inline-block;
  /*text-align: right;*/
  /*background-color: yellow;*/
   /*vertical-align: top;*/
}

.radios .radio-item {
display:block;
padding: 0.5em 0.5em;
}


textarea {
  vertical-align: top;
}

.control-row {
/*border-bottom: 1px solid gray;*/
  padding: 0.5em 0.5em;
}
-->
</style>

<script type="text/javascript">
   
  function test() {
  alert("test");
  }
  function validateField(field) {
    if (field.value == null || field.value == "") {
      alert("Valdiation error: field is required");
    }
  }
  
  function validateBtn1(element) {
  //alert("validtae fn: "+element.value);
  //return "aaa";
  return null;
  }  
</script>

<button onclick="test()">test fn</button>

<h2 class="test">This is my footer</h2>

<p>Here is the content of my template</p>

<g:section id="section" open="true" label="Section Title">
    <div>    
     Section content: 
    
     <br>
     <button name="btn1" onclick="g.fire('eeevvv', null, {key: 'www'})">Click Me</button>
      
     <button name="btn2" onclick="validateField(document.getElementById('txtfield'));">Click Me2</button>

     <br>
     
     <input id="txtfield" type="text" name="txtfield" value="type here" />
          
     <br>
    </div>
</g:section>

<hr>
<button onclick="alert('sss')">Some Btn</button>
<g:form id="theform" action="javascript:alert('submited')" target="editor">

  <g:control label="My label">
  <input name="f1" type="text" value="some"/>
  </g:control>
  <g:control label="My Number" validate="@regex:[0-9]+">
  <input name="f2" type="text" value="1"/>
  </g:control>


<button onclick="alert('sss'); return false;">Some Btn</button>


<g:vpanel id="some" spacing="10" style="border: 1px solid green;">
  <g:cell><g:action value="javascript:true">Test widget path</g:action></g:cell>
  <g:cell class="top">The top cell</g:cell>
  <g:cell style="border: 1px solid black">The middle cell</g:cell>
  <g:cell align="left">  
  <g:textbox name="num" validate="@regex:[0-9]+" label="Number" value="1"/></g:textbox>
  <g:textarea name="myarea" validate="@regex:[a-zA-Z ]+" label="My Area"/>value here</g:textarea>
  <g:password name="pwd" validate="@regex:[0-9]+" error="Must be a number" label="Number 2" value="3"></g:password>
  <g:hidden name="myhidden" value="hiddenvalue"></g:hidden>
  <g:checkbox name="check">My Check</g:checkbox>
  <br>
  <g:control>
  <input type="checkbox" onchange="this.g_form.element('myradio').style.display=this.checked?'none':''"/>
  </g:control> I want radios
  <fieldset>  
  <legend>Radios<legend>
  <g:radio name="myradio" class="radios">
    <g:item value="r1">Radio 1</g:item>
    <g:item value="r2">Radio 2</g:item>
    <g:item value="r3">Radio 3</g:item>
  </g:radio>
  </fieldset>  
  <g:listbox name="options" required="true" label="Options">
    <g:item value="o1">option 1</g:item>
    <g:item value="o2">option 2</g:item>
    <g:item value="o3" checked="true">option 3</g:item>
  </g:listbox>
  <g:listbox name="options" multiple="true" required="true" label="Multi Options">
    <g:item value="o1">option 1</g:item>
    <g:item value="o2" checked="true">option 2</g:item>
    <g:item value="o3">option 3</g:item>
    <g:item value="o4">option 4</g:item>
    <g:item value="o5">option 5</g:item>
  </g:listbox>
  <g:combo name="mycombo" label="My Combo" value="option 2">
    <g:item>option 1</g:item>
    <g:item>option 2</g:item>
    <g:item>option 3</g:item>
  </g:combo>  
  <g:date label="The Date" name="mydate" popup="true">
  </g:date>
  <br>
  <g:control>
    <button onclick="g_form.submit();">Submit</button>
  </g:control>
  <g:submit><b>Submit2</b></g:submit>  
  </g:cell>
  <g:cell>The bottom cell</g:cell>   
</g:panel>
</g:form>